
{#<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>#}
{% include "script.html" %}
<script type="text/javascript">
$(document).ready(function() {
	 // $(".table-bordered").hide();
    // $("#websocket_rest").remove();
	if(!("WebSocket" in window)){
		$('#chatLog, input, button, #examples').fadeOut("fast");
		$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
	}else{
		//The user has WebSockets

	connect();

	function connect(){
			// var socket;
			var host = "ws://{{ web_socket }}";
			// var host = "ws://192.168.50.99:8001/websocket";

			try{
				var socket = new WebSocket(host);
				message('<p class="event">Socket Status: '+socket.readyState);
				socket.onopen = function(){
					message('<p class="event">Socket Status: '+socket.readyState+' (open)');
				};

				socket.onmessage = function(msg){
					message('<p class="message">Received: '+msg.data);
				};

				socket.onclose = function(){
					message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
				}

			} catch(exception){
				message('<p>Error'+exception);
			}
            // var tag = $('<div id="chatLog" style="height: 500px;overflow: auto;"></div>');
			function message(msg){
                var sum_top = ".voilet_websocket"[1];
				var msg_data = $('.voilet_websocket').append(msg+'</p>');
                    // msg_data.animate({ scrollTop: sum_top.scrollHeight}, 1);

                // console.log(msg_data.animate({ scrollTop: sum_top.scrollHeight}, 1));
                // tag.append('<p>'+escapeString(obj.content)+'</p>');
                // tag.animate({ scrollTop: tag[0].scrollHeight}, 1);
			}//End message()
            $('.close').click(function(){
                // console.log("close 关闭");
                // console.log(socket);
                socket.close();
            });

		}
	}//End connect()
});
</script>
<style>
    .voilet_websocket{border:solid 1px #279048;height:600px;}
    .modal-dialog{height:100%;}
    .modal-content{width:800px;margin:auto;height:600px;overflow:auto;}
</style>
<div class="col-md-12 column voilet_websocket">
        <div id="chatLog" class="col-md-12">

        </div>
</div>